<script>
  import $ from '../dfish.js'
  import Horizontal from './Horizontal.vue'
  import PubParent from './PubParent.vue'

  export default {
    name: 'w-buttonbar',
    mixins: [Horizontal, PubParent],
    props: ['vertical'],
    methods: {
      x_default() {
        return {
          gap: 0,
          valign: this.vertical ? null : 'middle'
        }
      },
      html_slots() {       
        let s
        if (this.$slots.split) {
          let a = this.slots_children()
          let b = this.$slots.split()
          s = []
          for (let i = 0, l = a.length; i < l; i++) {
            s.push(a[i])
            if (i < l - 1) s.push(b)
          }
        }
        return this.html_scroll_slots(s)
      }
    },
    computed: {
      html_class() {
        return [this.x.vertical ? 'w-vertical' : 'w-horizontal', {[`f-${this.dir}-gap`]: this.x.gap && $.br.compat.gap}]
      }
    }
  }
</script>
